<template>
    <div class="shou">
        <div class="wen-top">
            <router-link to="hisconsultation">
                <img src="../../assets/images/fanhui.png" alt="" class="fanhui">
            </router-link>
            <h3>我的礼物</h3>
        </div>
        <div class="shou-pai" >
            <div class="shou-1" :style="{background:item.bg}"  v-for="(item,index) in giftlist" :key="index">
                <img :src="item.image">
                <div class="shou-class">{{ item.name }}</div>
                <div class="shou-time">{{ item.times }}</div>
            </div>
           
        </div>
    </div>
</template>

<script setup>
import {Gift} from '../../request/api'
import {ref} from 'vue'
let giftlist=ref([])


Gift().then((res)=>
{
    giftlist.value=res.data.data
})

</script>

<style lang="scss" scoped>
    .shou{
        width: 120%;
        height: 100vh;
        margin-left: -30px;
        margin-top: -20px;
        position: relative;
        .wen-top{
            width: 100%;
            height: 40px;
            position: sticky;
            left: 0;
            top: 0;
            z-index: 222;
            background: #fff;
            border-bottom: solid 1px #cfcccc;
            .fanhui{
                width: 25px;
                height: 25px;
                margin: 5px 30px;
            }
            h3{
                position: absolute;
                top: 5px;
                left: 150px;
                font-weight: 600;
            }
        }
        .shou-pai{
            width: 100%;
            height: 610px;
            .shou-1{
                width: 330px;
                height: 100px;
                border-radius: 10px;
                margin-left: 20px;
                margin-top: 10px;
                
                position: relative;
                img{
                    width: 65px;
                    height: 65px;
                    position: absolute;
                    top: 20px;
                    left: 20px;
                }
                .shou-class{
                    position: absolute;
                    right: 20px;
                    top: 20px;
                    font-size: 17px;
                    color: #fdf3f6;
                }
                .shou-time{
                    position: absolute;
                    top: 70px;
                    right: 20px;
                    color: #fdf3f6;
                    font-size: 12px;
                }
            }
            
        }
    }
</style>